<template>
  <div class="container">
    <h1 class="title">用户反馈信息展示</h1>
    <div class="search-container">
      <label for="searchType">搜索类型:</label>
      <input type="text" v-model="searchTypeValue" placeholder="请输入问题类型">
      <button @click="searchByType">搜索</button>
      <button @click="gotoFbshow">统计</button>
    </div>
    <div class="scroll" id="scroll">
      <el-table :data="filteredfbList" style="width: 100%">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="user_id" label="用户ID"></el-table-column>
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="type" label="问题类别"></el-table-column>
        <el-table-column prop="time" label="时间" :formatter="formatDate"></el-table-column>
        <el-table-column prop="status" label="状态" :formatter="formatType"></el-table-column>
        <el-table-column label="Operations" align="center">
          <template #default="{ row }">

            <el-button link type="primary" size="small" @click="markAsRead(row.id)">标记为已读</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import * as d3 from 'd3'; // 引入D3.js
import axios from 'axios';

// import { id } from 'element-plus/es/locale';
export default {
  data() {
    return {
      searchTypeValue: '',// 搜索类型，默认按用户查询
      searchKeyword: '', // 用户账号搜索关键词
      searchType: '', // 关键词搜索关键词
      filteredfbList: [], // 搜索后的问答信息列表
      showWordCloud: false, // 控制是否显示词云图
      fbList: '',
      type:''
    };
  },
  async created() {
    this.fetchFeedback(); // 在组件创建时获取用户数据 
  }, 
 
  methods: {
    formatType(row, column, value) {
      // 根据性别值返回对应的文字
      return value === 1 ? '已读' : '未读';

    },
    formatDate(row, column, cellValue) {
      // 确定单元格的值是日期对象
      if (cellValue) {
        // 使用您喜欢的日期格式化方法
        // 例如，使用 moment.js（需要先安装和导入）
        // return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');

        // 或者使用原生 JavaScript
        const date = new Date(cellValue);
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
      }
      return '';
    }
    ,
    async markAsRead(feedbackId) {
      try {
        // 发送PUT请求到后端API
        const response = await axios.put('/api/users/feedback/mark-as-read', {
          id: feedbackId,
        });

        // 处理响应
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '反馈已标记为已读!'
          });
          // 更新前端列表中的反馈状态
          this.updateFeedbackStatus(feedbackId, 1);
        } else {
          this.$message({
            type: 'error',
            message: '标记已读失败!'
          });
        }
      } catch (error) {
        // 处理错误
        this.$message.error('标记已读过程中出现错误！');
      }
    },
    updateFeedbackStatus(feedbackId, status) {
      // 更新前端列表中特定反馈的状态
      const index = this.filteredfbList.findIndex(fb => fb.id === feedbackId);
      if (index !== -1) {
        this.filteredfbList[index].status = status;
      }
    }
  ,
    async fetchFeedback() {
      try {
        const response = await axios.get('/api/users/getFeedback');
        console.log(response.data);
        this.filteredfbList = response.data; // 假设后端返回的数据直接用于表格  
      } catch (error) {
        console.error('Error fetching users:', error);
        // 可以在这里处理错误，比如显示一个错误消息  
      }
    },  
    async searchByType() {
      try {
        let type = this.searchTypeValue;
        console.log('searchTypeValue:', type);
        const response = await axios.get('/api/users/getFeedbackByType', {
          params: {
            type: type,
          },
          timeout: 5000, // 设置请求超时时间为5秒
        });
       

        // 确保response.data已经被定义
        if (response.data) {

          console.log('response.data:', response.data[0]);
         
          this.filteredfbList=response.data[0];
        } else {
          console.error('response.data is undefined');
        }

        // 处理响应
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '查询成功!'
          });
          // 更新前端状态或进行其他操作
        } else {
          this.$message({
            type: 'error',
            message: '查询失败!'
          });
        }
      } catch (error) {
        // 处理错误
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在2xx范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // 请求已经成功发起，但没有收到响应
          console.log(error.request);
        } else {
          // 发送请求时出了点问题
          console.log('Error', error.message);
        }
        this.$message.error('查询过程中出现错误！');
      }
    }


  ,
    gotoFbshow(){
      this.$router.push('/fbshow') ;
    },
    
    confirmDelete(index) {
      if (confirm("确定要删除这条问答信息吗？")) {
        // 在这里执行删除操作，例如：从数据库中删除该条问答信息
        this.fbList.splice(index, 1);
      }
    }
  }
};

</script>

<style scoped>
/* 这里可以添加组件的样式 */
.container {
 
  margin: 0 auto;
  padding: 20px;
}

.logo {
  text-align: center;
  margin-bottom: 20px;
}

.search-container {
  margin-bottom: 20px;
  height: 60px; /* Increase the height */
  display: flex;
    justify-content: center;
}

.search-container select,
.search-container input[type="text"] {
  height: 40px; /* Adjust the height of input/select elements */
  font-size: 16px; /* Increase font size */
  margin-left: 3px;
}

.search-container button {
  padding: 10px 20px; /* Adjust button padding */
  background-color: #4954d385;
  color: white;
  border: none;
  cursor: pointer;
  margin-left: 5px; /* Narrower spacing */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

button:hover {
  background-color: #1c1a9785;
}
.search-wrapper {
  position: relative;
}



.search-container label {
  /* font-weight: bold; */
  /* 加粗搜索类型文字 */

  font-family: 'Microsoft YaHei', sans-serif;
  padding-right: 20px;

}



.search-container input[type="text"] {

  height: 10px;
  /* Adjust the height of input/select elements */
  font-size: 16px;
  /* Increase font size */
  margin-left: 30px;
  border-radius: 5px;
  /* 添加圆角 */
  border: 1px solid #ccc;
  /* 修改边框颜色 */
  background-color: #d1dbe116;
  /* 修改输入框背景色 */
  margin-left: 20px;
  width: 400px;
  align-items: center;
}

.search-container input[type="text"]:focus {
  border: 1px solid #ccc;
  /* 修改边框颜色 */
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
  /* 深蓝色边框，透明度为0.5 */
}

.search-wrapper {
  position: relative;
}

.search-container button {
  padding: 8px 6px;
  /* Adjust button padding */
  background-color: #156AA8;
  color: white;
  border: 0.5px solid #afbcca;
  /* Add a 1px black border */
  cursor: pointer;
  margin-left: 5px;
  /* Narrower spacing */
  border-radius: 5px;
  /* Add rounded corners */
  font-size: 12px;
  /* height: 28px;  */
  line-height: 15px;
  /* Set line-height to the same as height (minus padding and border) */
  text-align: center;
  /* Ensure text is horizontally centered (default for buttons) */
}

.search-container button:hover {
  background-color: #156ba8da;
}

.search-container {
  display: flex;
  
  align-items: center;
}
</style>



